<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>编辑作品</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="../../../static/images/favicon.ico" th:href="@{/images/favicon.ico}">
    <link rel="stylesheet" href="../../../static/plugin/layui/css/layui.css" th:href="@{/plugin/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" href="../../../static/back_css/create_works.css" th:href="@{/back_css/create_works.css}" media="all">
</head>
<body>
<!--<div th:if="${isSup}!=1 and ${ts}==false and ${ls}==false" style="margin: 350px 500px;width: 500px"><h3 style="color: red">您没有权限修改本作品封面！</h3></div>-->
<div id="create_works_main">
    <div class="create_works_content">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">上传封面</label><br>
                <div class="layui-input-block">
                   <input type="hidden" name="WORK_IMGURL" id="work_cover" th:value="${picName}">
                   <input type="file" autocomplete="off" name="file1" class="layui-input upload_file" accept="image/*" id="test1">
                   <div class="upload_img layui-upload-list">
                       <img  class="layui-upload-img" id="demo1">
                       <span>请上传PNG、JPG、GIF格式图片</span>
                   </div>
                </div>
            </div>
            <div class="layui-btn-dom" id="res">
                <div class="layui-input-block">
                    <span style="color: red;" >您正在修改作品封面！请确认无误后提交！</span>
                    <button class="layui-btn layui-bg-gray layui-btn-radius" type="reset" lay-filter="demo1">重置</button>
                    <button type="button" class="layui-btn layui-bg-orange layui-btn-radius" lay-submit="" lay-filter="confirm">提交</button>
                </div>
            </div>
            <div class="layui-btn-dom" id="yuan" style="display: none">
                <div class="layui-input-block">
                    <span style="color: red;" >您已成功修改作品封面！</span>
                    <button type="button" class="layui-btn layui-bg-orange layui-btn-radius" onclick="back()" lay-filter="confirm">作品列表</button>
                </div>
            </div>
            <input type="hidden" id="picName" th:value="${picName}"/>
            <input type="hidden" id="WORK_ID" name="WORK_ID" th:value="${WORK_ID}"/>
        </form>
    </div>
</div>
<script type="text/javascript" src="../../../static/plugin/layui/layui.js" th:src="@{/plugin/layui/layui.js}"></script>

<script>
    layui.use(['form', 'layedit', 'laydate','upload'], function() {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            ,upload = layui.upload
            ,$ = layui.jquery;
        form.verify({
            phone: [
                /^((\+86)|(86))?(1[3|4|5|6|7|8])\d{9}$/
                ,'请输入正确手机号'
            ]

        });
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '/picUpload'
            , method:'post'
            , multiple: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
                $(".upload_file>span").css("display","none");
                $(".layui-upload-img").css("display","block");
            }
            ,done: function(res){
                //如果上传失败
                if(res.code == 0){
                    return layer.msg('上传失败');
                }
                $("#work_cover").val(res.pic);
                //上传成功
            }
        });
        var audioIndex;
        upload.render({
            elem: '#test6_audio'
            , url: '/soundUpload'
            , accept:'audio'
            , acceptMime:"audio/*"
            , exts: "mp3|m4a|wma|amr|ape|flac|aac"
            , method:'post'
            , multiple: true
            ,choose:function(obj){
                obj.preview(function(index, file, result){
                    $('#audio').attr('src', result);
                });
            }
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                audioIndex=layer.load(1);
            }
            ,done: function(res){
                //console.log(res)
                if(res.code == 0){
                    return layer.msg(res.msg);
                }
                $("#audio_work_input").val(res.name);
                $("#work_length").val(res.time);
                layer.close(audioIndex);
            }

        });
        var videoIndex;
        upload.render({
            elem: '#test6_video'
            , url: '/VideoUpload'
            , accept:'file'
            , acceptMime:'video/*'
            //, exts:'MP4'
            , method:'post'
            , multiple: true
            ,choose:function(obj){
                obj.preview(function(index, file, result){
                    $('#video').attr('src', result);
                });
            }
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                videoIndex=layer.load(1);
            }
            ,done: function(res){
                //console.log(res)
                if(res.code == 0){
                    return layer.msg(res.msg);
                }
                $("#audio_work_input").val(res.name);
                $("#work_length").val(res.time);
                layer.close(videoIndex);
            }

        });

        form.on("radio(work_type)",function(data){
            //console.log(data);

            if(data.value=="1"){//音频
                $(".audio_container").css("display","block");
                $(".video_container").css("display","none");

            }else if(data.value=="0") {//视频
                $(".video_container").css("display", "block");
                $(".audio_container").css("display", "none");
            }
        });
        form.on("submit(confirm)",function (data) {
            $.get({
                url:"/backEditorWork",
                data:data.field,
                dataType:"json",
                async:false,
                success:function (res) {
                    //console.log("res",res)
                    if(res==1){
                        layer.msg("更新成功！")
                        $("#res").css("display","none");
                        $("#yuan").css("display","block");
                    }else{
                        window.location.href='/editorWork?WORK_ID='+$("#WORK_ID").val()
                    }
                },
                error:function (res) {
                    return layer.msg("网络错误···");
                }
            })
        })
        $(function () {
            $('#demo1').attr('src', $("#picName").val());
            $(".upload_file>span").css("display","none");
            $(".layui-upload-img").css("display","block");
        })

    });

    function back() {
        window.history.back(-1);
    }
</script>
</body>
</html>